<template>
	<view class="heart"></view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.heart {
	    background-color: crimson;
	    display: inline-block;
	    width: 100px;
	    height: 100px;
	    position: relative;
	    top: 0;
	    transform: rotate(-45deg);
	    position: absolute;
	    left: 45%;
	    top: 45%;
	    animation: heartbeat 1.25s infinite;
	}
	
	.heart::before {
	    top: -50px;
	    left: 0;
	}
	.heart::before, .heart::after {
	    content: "";
	    background-color: crimson;
	    width: 100px;
	    height: 100px;
	    border-radius: 50%;
	    position: absolute;
	    animation: pulsecolor 1.25s infinite;
	}
	
	.heart::after {
	    top: 0;
	    left: 50px;
	}
	.heart::before, .heart::after {
	    content: "";
	    background-color: crimson;
	    width: 100px;
	    height: 100px;
	    border-radius: 50%;
	    position: absolute;
	    animation: pulsecolor 1.25s infinite;
	}
	
	@keyframes heartbeat {  
		0% {
		    transform: scale(1) rotate(-45deg);
		}
		10% {
		    transform: scale(1.25) rotate(-45deg);
		    background-color: #EF395E;
		}
		100% {
		    transform: scale(1) rotate(-45deg);
		}
	}
	
	@keyframes pulsecolor {
		10% {
			background-color:#EF395E
		}
	}
</style>
